<script setup lang="ts">
import { useTimeAgo } from '@/hooks/web/useTimeAgo'
import {
  ElRow,
  ElButton,
  ElCol,
  ElSkeleton,
  ElCard,
  ElDivider,
  ElLink,
  ElTable,
  ElTableColumn
} from 'element-plus'
import { useI18n } from '@/hooks/web/useI18n'
import { ref, reactive } from 'vue'
import { CountTo } from '@/components/CountTo'
import { formatTime } from '@/utils'
import { Echart } from '@/components/Echart'
import { EChartsOption } from 'echarts'
import { radarOption } from './echarts-data'
import { Highlight } from '@/components/Highlight'
import {
  getCountApi,
  getProjectApi,
  getDynamicApi,
  getTeamApi,
  getRadarApi
} from '@/api/dashboard/workplace'
import { studentData } from './data.js'
import type { WorkplaceTotal, Project, Dynamic, Team } from '@/api/dashboard/workplace/types'
import { set } from 'lodash-es'

const loading = ref(true)
const tableStudentData = studentData
// 获取统计数
let totalSate = reactive<WorkplaceTotal>({
  project: 0,
  access: 0,
  todo: 0
})
const reconstructionStuCell = ({ row, column, rowIndex, columnIndex }) => {
  console.log(row, column, rowIndex, columnIndex)
  if (rowIndex === 0) {
    return {
      rowspan: 1,
      colspan: 1
    }
    if (columnIndex === 1) {
      return {
        rowspan: 5,
        colspan: 1
      }
    }
  } else {
    return {
      rowspan: 1,
      colspan: 1
    }
  }
}
const getCount = async () => {
  const res = await getCountApi().catch(() => {})
  if (res) {
    totalSate = Object.assign(totalSate, res.data)
  }
}

let projects = reactive<Project[]>([])

// 获取项目数
const getProject = async () => {
  const res = await getProjectApi().catch(() => {})
  if (res) {
    projects = Object.assign(projects, res.data)
  }
}

// 获取动态
let dynamics = reactive<Dynamic[]>([])

const getDynamic = async () => {
  const res = await getDynamicApi().catch(() => {})
  if (res) {
    dynamics = Object.assign(dynamics, res.data)
  }
}

// 获取团队
let team = reactive<Team[]>([])

const getTeam = async () => {
  const res = await getTeamApi().catch(() => {})
  if (res) {
    team = Object.assign(team, res.data)
  }
}

// 获取指数
const radarOptionData = reactive<EChartsOption>(radarOption) as EChartsOption

const getRadar = async () => {
  const res = await getRadarApi().catch(() => {})
  if (res) {
    set(
      radarOptionData,
      'radar.indicator',
      res.data.map((v) => {
        return {
          name: t(v.name),
          max: v.max
        }
      })
    )
    set(radarOptionData, 'series', [
      {
        name: `xxx${t('workplace.index')}`,
        type: 'radar',
        data: [
          {
            value: res.data.map((v) => v.personal),
            name: t('workplace.personal')
          },
          {
            value: res.data.map((v) => v.team),
            name: t('workplace.team')
          }
        ]
      }
    ])
  }
}

const getAllApi = async () => {
  await Promise.all([getCount(), getProject(), getDynamic(), getTeam(), getRadar()])
  loading.value = false
}

getAllApi()

const { t } = useI18n()
</script>

<template>
  <div class="table-card-wrap">
    <ElCard shadow="always">
      <div class="menu-header">
        <div class="menu-header-left">
          <ElButton type="primary">菜品</ElButton>
          <ElButton type="primary">模板</ElButton>
        </div>
        <div class="menu-header-title">2024-08-05 ~ 2024-08-12 总菜单</div>
        <div class="menu-header-right">
          <ElButton type="primary">计划</ElButton>
          <ElButton type="primary">食材</ElButton>
        </div>
      </div>
      <div class="main-table-wrap">
        <ElTable :data="tableStudentData" :span-method="reconstructionStuCell" style="width: 100%">
          <ElTableColumn prop="mealType" label="餐别"></ElTableColumn>
          <ElTableColumn prop="name" label="姓名"></ElTableColumn>
          <ElTableColumn label="科目信息">
            <ElTableColumn prop="courseName" label="科目"></ElTableColumn>
            <ElTableColumn prop="date" label="日期"></ElTableColumn>
            <ElTableColumn prop="timeStr" label="考试时间"></ElTableColumn>
          </ElTableColumn>
          <ElTableColumn label="成绩信息">
            <ElTableColumn prop="score" label="成绩"></ElTableColumn>
            <ElTableColumn prop="scoreTotal" label="总分"></ElTableColumn>
            <ElTableColumn prop="total" label="满分"></ElTableColumn>
          </ElTableColumn>
        </ElTable>
      </div>
    </ElCard>
  </div>
</template>
<style lang="less" scoped>
.table-card-wrap {
  .menu-header {
    display: flex;
    .menu-header-left {
      width: 200px;
    }
    .menu-header-title {
      flex: 1;
      text-align: center;
    }
    .menu-header-right {
      width: 200px;
    }
  }
  .main-table-wrap {
    width: 100%;
    margin-top: 20px;
  }
}
</style>
